<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function to_enterprise() {
  router.push(`/enterprise`)
}
</script>

<template>
  <div id="header">
    <div class="wrapper">
      <div class="left">
        <img class="logo" src="" alt="logo" />
        <ul class="nav">
          <li><router-link to="/home">首页</router-link></li>
          <li><router-link to="/recommend">推荐</router-link></li>
          <li><router-link to="/search">搜索</router-link></li>
          <li><router-link to="/company">公司</router-link></li>
          <li><router-link to="/app">APP</router-link></li>
        </ul>
      </div>
      <div class="right">
        <div class="recruit" @click="to_enterprise">我要招聘</div>
        <div class="hunting">我要找工作</div>
        <div class="login_register">
          <router-link to="/login">登录/注册</router-link>
        </div>
      </div>
    </div>
  </div>
  <div id="main">
    <router-view />
  </div>
</template>

<style lang="scss" scoped>
#header {
  z-index: 105;
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: #242424;
  font-weight: 500;
  font-size: 16px;
  .wrapper {
    height: 100%;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      justify-content: center;
      .logo {
        width: 104px;
        height: 19px;
      }
      .nav {
        display: flex;
        li {
          a {
            line-height: 20px;
            color: #fff;
            &:hover {
              //a标签悬停变色
              color: #6f9edf;
            }
          }
          .router-link-active {
            //a标签切换变色
            color: #6f9edf;
          }
        }
        li:not(:last-child) {
          margin-right: 20px;
        }
      }
    }
    .right {
      display: flex;
      justify-content: center;
      align-items: center;
      .recruit,
      .hunting,
      .login_register > a {
        padding: 5px 10px;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
        &:hover {
          background-color: #5c5c5c;
        }
      }
      .login_register > a {
        border-radius: 10px;
        border: #00bebd solid 1px;
        &:hover {
          background-color: #014359;
          color: #00bebd;
        }
      }
    }
  }
}
#main {
  width: 100%;
  padding-top: 50px;
  &:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 614px;
    min-width: 1224px;
    background: linear-gradient(180deg, #0d7efe, #036fe3 50%, #fff);
    opacity: 0.1;
    z-index: -1;
  }
}
</style>
